<template>
    <div class="person">
        <h1>
            情况四/五:监视ref或者reactive定义的对象中的某个属性,多个属性
        </h1>
        <h2>姓名为:{{ person.name }}</h2>
        <h2>年龄为:{{ person.age  }}</h2>
        <h2>汽车为:{{ person.car.c1  }},{{ person.car.c2 }}</h2>

        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
  
        <button @click="changeC1">修改第一台车</button>
        <button @click="changeC2">修改第二台车</button>
        <button @click="changeCar">修改所有的车</button>
        
        
        <hr>
        
    </div>
</template>
<script lang="ts" setup name='Person'>
import { reactive, ref, watch } from "vue";
let person = ref({
    name: "GG"
    ,age: 20
    ,car:{
        c1:"本次"
        ,c2:"宝马"
    }
})

function changeName() {
   person.value.name += "~~"
}
function changeAge() {
    person.value.age += 1
}
function changeCar() {
  person.value.car = {c1:"GG",c2:"Sdd"}
}
function changeC1() {
    person.value.car.c1 =  "保时捷"
}
function changeC2() {
    person.value.car.c2 =  "拜登"
}

/* 
    如果要监视多个属性,可以使用数组的方式ing....................................................

    结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。
    并且要搞清楚浅复制与深复制,我们的内存地址很重要!
*/

const stopWatch = watch(()=>[person.value.car.c1,person.value.car.c2], (newValue, oldValue) => {
    console.log("person发生了变化", newValue, oldValue);
})
        
</script>
<style scoped>
/*  组件的样式 */
    .person{
            /* 设置颜色,设置阴影,
            设置元素的外边框圆角,使用一个半径可以确定一个圆形,当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。
            设置内边距
            */
        background-color: aqua;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }


</style>
